<template>
	<view class="navigation_ball_component">
		<u-gap height="8"></u-gap>
		<swiper
			:duration="200"
			v-if="navList.length > 0"
			class="swiper"
			:style="{
				height:
					num == 4
						? navList[current].length > 4
							? '360rpx'
							: '180rpx'
						: navList[current].length > 5
						? '360rpx'
						: '180rpx'
			}"
			@change="swiperChange"
		>
			<swiper-item
				class="sw_item"
				v-for="(item, index) in navList"
				:key="index"
			>
				<view class="grid_box">
					<view
						class="grid-item"
						:style="{ width: num == 4 ? '25%' : '20%' }"
						v-for="el in item"
						:key="el.id"
						@click="itemTo(el)"
					>
						<u-image
							width="111rpx"
							height="111rpx"
							:src="el.navPicUrl"
							shape="circle"
						></u-image>
						<view class="navigation_title">{{ el.navName }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-gap height="16"></u-gap>
		<view class="indicator-dots">
			<view
				v-for="(item, index) in pages"
				:key="index"
				class="indicator-dots-item"
				:class="[current == index ? 'indicator-dots-active' : '']"
			></view>
		</view>
		<u-gap height="8"></u-gap>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		num: {
			type: Number,
			default: 4
		},
		modelType: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
			current: 0,
			navList: [],
			pages: 1
		}
	},
	watch: {
		value(val) {
			// 手动进行分页
			let totalPage = 0 //总页数
			const pageSize = this.num * 2 //每页显示行数
			const num = this.value.length
			if (num / pageSize > parseInt(num / pageSize)) {
				//假设有20条数据，15条数据页
				totalPage = parseInt(num / pageSize) + 1 //1.333>1 ,所以分为两页
			} else {
				totalPage = parseInt(num / pageSize) //若有45条数据，则分为3页
			}
			this.pages = totalPage
			var result = []
			for (var i = 0; i < this.value.length; i += pageSize) {
				result.push(this.value.slice(i, i + pageSize))
			}
			this.navList = result
		}
	},
	methods: {
		swiperChange(e) {
			this.current = e.detail.current
		},
		itemTo(row) {
			const data = {
				...row,
				modelType: this.modelType
			}
			this.$store.commit('VIEW_SWITCH', data)
		}
	}
}
</script>

<style lang="scss">
.navigation_ball_component {
	overflow: hidden;
	margin: 0 24rpx;
	.swiper {
		transition: .2s;
		background-color: #fff;
		border-radius: 16rpx;
		.sw_item {
			overflow: hidden;
			border-radius: 16rpx;
			.grid_box {
				display: flex;
				flex-wrap: wrap;
				min-height: 180rpx;
				.grid-item {
					width: 25%;
					min-height: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.navigation_title {
						color: #434343;
						margin-top: 10rpx;
						text-align: center;
						@include overText(100%, block);
					}
				}
			}
		}
	}
	.indicator-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		.indicator-dots-item {
			background-color: #d9d9d9;
			height: 6rpx;
			width: 32rpx;
		}
		.indicator-dots-active {
			background-color: #6f6f6f;
		}
	}
}
</style>
